<template>
  <div>
    <common-search ref="SearchData" titleName="游戏类别名"></common-search>
    <el-main>
      <el-button type="success" round @click="dialogFormVisible=true">添加新游戏类别</el-button>
      <el-table :data="tableData.records">
        <el-table-column prop="classesName" label="游戏类别名" width="120">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-button type="primary" icon="el-icon-edit" circle @click.native.prevent="updateById(scope.row)"></el-button>
            <!-- 修改新增表单位置已转移至el-main下面 -->
            <!-- <el-dialog title="游戏类别信息" :visible.sync="dialogFormVisible" close-on-press-escape :before-close="clearUpdateData">
              <el-form :model="gameCategory">
                <el-form-item label="游戏类别名称" :label-width="formLabelWidth">
                  <el-input v-model="gameCategory.classesName" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
              <el-button @click="clearUpdateData">取 消</el-button>
              <el-button type="primary" @click="updateClassesNameByIdArAddNew">确 定</el-button>
              </div>
            </el-dialog> -->
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <!-- 修改新增表单新位置 -->
    <el-dialog title="游戏类别信息" :visible.sync="dialogFormVisible" close-on-press-escape :before-close="clearUpdateData">
      <el-form :model="gameCategory">
        <el-form-item label="游戏类别名称" :label-width="formLabelWidth">
          <el-input v-model="gameCategory.classesName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
      <el-button @click="clearUpdateData">取 消</el-button>
      <el-button type="primary" @click="updateClassesNameByIdArAddNew">确 定</el-button>
      </div>
    </el-dialog>
    <common-footer :pageData="tableData" ref="footData"></common-footer>
  </div>
</template>

<script>
    import CommonSearch from '@/components/CommonSearch.vue'
    import CommonFooter from '@/components/CommonFooter.vue'
    import axios from 'axios'
    export default {
        name:'GameCategory',
        data() {
            return{
                tableData:{},
                searchD:'',
                gameCategory:{
                  id:'',
                  classesName:'',
                },
                formLabelWidth: '120px',
                dialogFormVisible:false,
            }
        },
        components:{CommonSearch,CommonFooter},
        props:["page","pageSize"],
        mounted() {
          this.$refs.SearchData.$on('searchData',this.getGameCategoryByName);
          this.$refs.footData.$on('pageSize',this.getPageSize);//接收子组件分页栏的每页显示条目数
          this.$refs.footData.$on('currentPage',this.getCurrentPage);//接收子组件分页栏的数据
          axios.get(`/game-category/getPage?page=${this.page}&pageSize=${this.pageSize}`).then(
              response=>{
                  this.tableData=response.data.data
                  },
              error=>{
                  console.log("请求失败。原因是",error.message);
              }
          )
        },
        methods:{
          getGameCategoryByName(name){//模糊查询，收到子组件传来的关键字，更改data数据，监控属性监控到自动调用请求
            this.searchD=name;
            if(this.tableData.current===1){
              this.updataPageData();
            }else{
              this.tableData.current=1;
            }
          },
          getPageSize(pagesize){//修改每页数据个数，监控属性监控到自动调用请求
            this.tableData.size=pagesize;
          },
          getCurrentPage(currentpage){//修改当前页，监控属性监控到自动调用请求
            this.tableData.current=currentpage;
          },
          updataPageData(){//用户模糊查询，翻页，每页个数，刷新页面
            axios.get(`/game-category/getPage?page=${this.tableData.current}&pageSize=${this.tableData.size}&name=${this.searchD}`).then(
            response=>{
              this.tableData=response.data.data;
              this.gameCategory={
                id:'',
                classesName:'',
              }
            },
            error=>{
              console.log("请求失败。原因是",error.message);
            });
          },
          updateById(val){//进入修改页面
            this.dialogFormVisible = true;//开启信息页面
            this.gameCategory.id=val.id;
            this.gameCategory.classesName=val.classesName;
          },
          updateClassesNameByIdArAddNew(){//发请求进行修改或者新添
            this.dialogFormVisible = false;
            if(this.gameCategory.id===''){//没有id则为新增
              axios(
                {
                  method:'post',
                  url:'/game-category/addNew',
                  data:this.gameCategory
                }
              ).then(
                response=>{
                  if(response.data.data===true){
                    alert('添加新游戏类别成功');
                    /*如果总页数×每页显示条数大于总记录数的话，则当前页的=总页数
                      反之当前页=总页数+1*/
                    if(this.tableData.size*this.tableData.pages>this.tableData.total){
                      /*如果当前页不在最后一页的话，只是当前页=最后一页，利用监控属性执行刷新
                      如果当前页在最后一页的话手动调用刷新*/
                      if(this.tableData.current<this.tableData.pages){
                        this.tableData.current=this.tableData.pages;
                      }else{
                        this.updataPageData();
                      }
                    }else{
                      if(this.tableData.current>this.tableData.pages){
                            this.updataPageData();
                      }else{
                          this.tableData.current=this.tableData.pages+1;
                      }
                    }
                  }else{
                    alert('该游戏类别已存在，添加失败');
                    this.gameCategory={
                      id:'',
                      classesName:'',
                    }
                  }
                }
              )
              }else{//有id则为修改‘
              axios(
                {
                  method:'post',
                  url:'/game-category/updateById',
                  data:this.gameCategory,
                }
              ).then(
                response=>{
                if(response.data.data===true){
                  alert('修改游戏类别成功');
                  this.updataPageData();
                }else{
                  alert('修改失败，请检查是否和其他游戏类别重名');
                  this.gameCategory={
                    id:'',
                    classesName:'',
                  }
                }
              }
            );
            }       
          },
          clearUpdateData(){//关闭对话框时清空表单数据
            this.dialogFormVisible = false;
            this.gameCategory={
              id:'',
              classesName:'',
            }
          }
        },
        watch:{
          'tableData.size':{
              handler(newValue,oldValue){
                if(oldValue!==undefined){
                  this.updataPageData();
                }
              }
          },
          'tableData.current':{
              handler(newValue,oldValue){
                if(oldValue!==undefined){
                  this.updataPageData();
                }
              }
          }
        }
    }
</script>

<style>

</style>